<?php
// contact.php - Contact Page
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us - Global Food Market</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- Modern Header -->
    <header class="modern-header">
        <div class="header-top">
            <div class="container">
                <div class="header-contact">
                    <span><i class="fas fa-phone"></i> +1 (555) 123-4567</span>
                    <span><i class="fas fa-envelope"></i> info@globalfoodmarket.com</span>
                </div>
                <div class="header-social">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
        </div>
        
        <nav class="main-nav">
            <div class="container">
                <div class="nav-brand">
                    <h1 class="logo">Global Food Market</h1>
                    <p class="tagline">Taste the World</p>
                </div>
                <ul class="nav-menu">
                    <li><a href="index.php" class="nav-link">Home</a></li>
                    <li><a href="products.php" class="nav-link">Products</a></li>
                    <li><a href="about.php" class="nav-link">About</a></li>
                    <li><a href="contact.php" class="nav-link active">Contact</a></li>
                    <li><a href="admin/login.php" class="nav-link admin-btn">Admin</a></li>
                </ul>
                <div class="nav-actions">
                    <button class="cart-btn">
                        <i class="fas fa-shopping-cart"></i>
                        <span class="cart-count">0</span>
                    </button>
                    <button class="mobile-menu-btn">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
            </div>
        </nav>
    </header>

    <!-- Contact Header -->
    <section class="page-header">
        <div class="container">
            <h1>Contact Us</h1>
            <p>We'd love to hear from you. Get in touch with any questions or feedback.</p>
        </div>
    </section>

    <!-- Contact Content -->
    <section class="contact-content">
        <div class="container">
            <div class="contact-grid">
                <div class="contact-info">
                    <h2>Get In Touch</h2>
                    <p>Have questions about our products or need assistance with your order? We're here to help!</p>
                    
                    <div class="contact-methods">
                        <div class="contact-method">
                            <div class="method-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="method-info">
                                <h3>Visit Us</h3>
                                <p>123 Food Street<br>Global City, GC 12345</p>
                            </div>
                        </div>
                        
                        <div class="contact-method">
                            <div class="method-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div class="method-info">
                                <h3>Call Us</h3>
                                <p>+1 (555) 123-4567<br>Mon-Fri, 9AM-6PM EST</p>
                            </div>
                        </div>
                        
                        <div class="contact-method">
                            <div class="method-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="method-info">
                                <h3>Email Us</h3>
                                <p>info@globalfoodmarket.com<br>We reply within 24 hours</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="business-hours">
                        <h3>Business Hours</h3>
                        <ul>
                            <li><span>Monday - Friday:</span> 9:00 AM - 6:00 PM</li>
                            <li><span>Saturday:</span> 10:00 AM - 4:00 PM</li>
                            <li><span>Sunday:</span> Closed</li>
                        </ul>
                    </div>
                </div>
                
                <div class="contact-form-container">
                    <h2>Send us a Message</h2>
                    <form class="contact-form" id="contactForm">
                        <div class="form-group">
                            <label for="name">Full Name *</label>
                            <input type="text" id="name" name="name" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="email">Email Address *</label>
                            <input type="email" id="email" name="email" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="phone">Phone Number</label>
                            <input type="tel" id="phone" name="phone">
                        </div>
                        
                        <div class="form-group">
                            <label for="subject">Subject *</label>
                            <select id="subject" name="subject" required>
                                <option value="">Select a subject</option>
                                <option value="general">General Inquiry</option>
                                <option value="products">Product Questions</option>
                                <option value="order">Order Support</option>
                                <option value="wholesale">Wholesale Inquiry</option>
                                <option value="feedback">Feedback</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="message">Message *</label>
                            <textarea id="message" name="message" rows="5" required placeholder="Tell us how we can help you..."></textarea>
                        </div>
                        
                        <button type="submit" class="submit-btn">
                            <i class="fas fa-paper-plane"></i>
                            Send Message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Map Section -->
    <section class="map-section">
        <div class="container">
            <h2 class="section-title">Find Us</h2>
            <div class="map-placeholder">
                <div class="map-content">
                    <i class="fas fa-map-marked-alt"></i>
                    <h3>Store Location</h3>
                    <p>123 Food Street, Global City</p>
                    <p>We're located in the heart of the city, easily accessible by public transport.</p>
                    <button class="directions-btn">
                        <i class="fas fa-directions"></i>
                        Get Directions
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- Modern Footer -->
    <footer class="modern-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Global Food Market</h3>
                    <p>Bringing authentic international flavors to your kitchen since 2024.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-pinterest"></i></a>
                    </div>
                </div>
                <div class="footer-section">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="index.php">Home</a></li>
                        <li><a href="products.php">Products</a></li>
                        <li><a href="about.php">About Us</a></li>
                        <li><a href="contact.php">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>Categories</h4>
                    <ul>
                        <li><a href="products.php?category=sauces">Sauces</a></li>
                        <li><a href="products.php?category=snacks">Snacks</a></li>
                        <li><a href="products.php?category=spices">Spices</a></li>
                        <li><a href="products.php?category=beverages">Beverages</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>Contact Info</h4>
                    <div class="contact-info">
                        <p><i class="fas fa-map-marker-alt"></i> 123 Food Street, City, Country</p>
                        <p><i class="fas fa-phone"></i> +1 (555) 123-4567</p>
                        <p><i class="fas fa-envelope"></i> info@globalfoodmarket.com</p>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 Global Food Market. All rights reserved. | ICTWEB513 E-Commerce Integration Project</p>
            </div>
        </div>
    </footer>

    <style>
        .contact-content {
            padding: var(--space-xxl) 0;
        }
        
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: var(--space-xl);
        }
        
        .contact-methods {
            margin: var(--space-xl) 0;
        }
        
        .contact-method {
            display: flex;
            align-items: flex-start;
            gap: var(--space-md);
            margin-bottom: var(--space-lg);
        }
        
        .method-icon {
            width: 50px;
            height: 50px;
            background: var(--primary);
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }
        
        .method-info h3 {
            color: var(--primary);
            margin-bottom: var(--space-xs);
        }
        
        .business-hours {
            margin-top: var(--space-xl);
        }
        
        .business-hours h3 {
            color: var(--primary);
            margin-bottom: var(--space-md);
        }
        
        .business-hours ul {
            list-style: none;
        }
        
        .business-hours li {
            padding: var(--space-sm) 0;
            border-bottom: 1px solid var(--border);
        }
        
        .business-hours span {
            font-weight: 600;
            color: var(--text);
            min-width: 150px;
            display: inline-block;
        }
        
        .contact-form-container {
            background: var(--white);
            padding: var(--space-xl);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
        }
        
        .contact-form-container h2 {
            color: var(--primary);
            margin-bottom: var(--space-lg);
        }
        
        .form-group {
            margin-bottom: var(--space-lg);
        }
        
        .form-group label {
            display: block;
            margin-bottom: var(--space-sm);
            font-weight: 600;
            color: var(--text);
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: var(--space-md);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        .submit-btn {
            background: var(--primary);
            color: var(--white);
            border: none;
            padding: var(--space-md) var(--space-xl);
            border-radius: var(--radius-md);
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s ease;
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }
        
        .submit-btn:hover {
            background: var(--primary-dark);
        }
        
        .map-section {
            padding: var(--space-xxl) 0;
            background: var(--secondary);
        }
        
        .map-placeholder {
            background: var(--white);
            border-radius: var(--radius-lg);
            padding: var(--space-xxl);
            text-align: center;
            box-shadow: var(--shadow-sm);
            margin-top: var(--space-xl);
        }
        
        .map-content i {
            font-size: 4rem;
            color: var(--primary);
            margin-bottom: var(--space-md);
        }
        
        .map-content h3 {
            color: var(--primary);
            margin-bottom: var(--space-sm);
        }
        
        .map-content p {
            color: var(--text-light);
            margin-bottom: var(--space-sm);
        }
        
        .directions-btn {
            background: var(--accent);
            color: var(--white);
            border: none;
            padding: var(--space-md) var(--space-lg);
            border-radius: var(--radius-md);
            font-weight: 600;
            cursor: pointer;
            margin-top: var(--space-md);
            display: inline-flex;
            align-items: center;
            gap: var(--space-sm);
        }
        
        @media (max-width: 768px) {
            .contact-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const contactForm = document.getElementById('contactForm');
            
            if (contactForm) {
                contactForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    // Simple form validation
                    const name = document.getElementById('name').value;
                    const email = document.getElementById('email').value;
                    const message = document.getElementById('message').value;
                    
                    if (!name || !email || !message) {
                        alert('Please fill in all required fields.');
                        return;
                    }
                    
                    // Simulate form submission
                    alert('Thank you for your message! We will get back to you soon.');
                    contactForm.reset();
                });
            }
        });
    </script>
</body>
</html>